import React,{useState} from 'react'
import "./index.less"
import { Affix, Button } from 'antd';

export default function Affix_demo(){
    const [top, setTop] = useState(10);
    const [bottom, setBottom] = useState(100);
    return (
        <div className="Affix_demo">
            <h1>Affix 固钉</h1>
            <Affix offsetTop={top}>
                <Button>10悬浮按钮</Button>
            </Affix>
            <Affix offsetBottom={bottom}>
                <Button>非悬浮按钮</Button>
            </Affix>
            <Affix2/>
            <Affix3/>
            <Affix style={{position:'absolute',top:100,right:100}}>
                <Button>绝对定位按钮</Button>
            </Affix>
            <div className="red"></div>
        </div>
    )
}

function Affix2(){
    return (
        <div className="Affix2">
            <Affix offsetTop={50} onChange={affixed=>console.log(affixed)}>
                <Button>50悬浮按钮</Button>
            </Affix>
        </div>
    )
}

function Affix3(){
    const [container, setcontainer] = useState(null);
    return (
        <div className="scrollable-container" ref={setcontainer}>
            <div className="background">
                <Affix target={()=>container}>
                    <Button type="primary">按钮</Button>
                </Affix>
            </div>
        </div>
    )
}